<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css"
          href="bootstrap/bootstrap.4.1.0.css">
    <script src="./bootstrap/jquery.3.2.1.min.js"></script>
    <script src="./bootstrap/popper.12.5.min.js"></script>
    <script src="./bootstrap/bootstrap.4.1.0.min.js"></script>
    <script src="./layui/layer/layer.js"></script>
    <script src="./layui/laydate/laydate.js"></script>
    <script src="./vue/Vue.js"></script>
    <script src="./vue/axios.js"></script>
    <style>
        a {
            text-decoration: none;
        }

        .wrapper {
        }

        .title {
            font-size: 20px;
        }
        .wrapper .prev,
        .wrapper .next {
            display: inline-block;
            height: 42px;
            width: 42px;
            background: #ccc;
            line-height: 42px;
            text-align: center;
            font-size: 25px;
            color: #000;
        }

        .wrapper .text {
            text-align: center;
            background: #fff;
            height: 42px;
            width: 100px;
            box-sizing: border-box;
            vertical-align: top;
        }
    </style>
</head>
<body>
    <div id="app">
        <br>
        <span>车型：</span>{{carType}}
        <br>
        <br>
        <span>图号：</span>{{mapNum}}
        <br>
        <br>
        <span>种类：</span>{{typeName}}
        <br>
        <br>
        <span>名称：</span>{{name}}
        <br>
        <br>
        <span>价格：</span>{{price}}
        <br>
        <br>
        <span>产地：</span>{{factory}}
        <br>
        <br>
        <span>备注：</span>{{mark}}
        <br>
        <br>
        <div>
            <span>进货/销售时间：</span>
            <input type="text" placeholder="选择进货/销售时间" id="orderTime" v-model="date">
        </div>
        <br>
        <br>
        <div>
            <div class="wrapper">
                <span>库存：</span>
                <a href="javascript:;" class="prev" @click="subStock">-</a>
                <input type="text" v-model="stock" class="text">
                <a href="javascript:;" class="next" @click="addStock">+</a>
            </div>
            <br>
            <br>
            <input type="button" value="确定" @click = "updatePro()"  class="btn-default" style="display: block;margin: 0 auto">
        </div>
    </div>
</body>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            carType: "",
            mapNum: "",
            name: "",
            price: null,
            factory: "",
            mark: "",
            proId: null,
            stock: 0,
            typeName:"",
            date:null
        },
        mounted:function() {
            laydate.render({
                elem:"#orderTime",
                type:"date",
                format:"yyyy-MM-dd",
                trigger:"click",
                done: val => {
                    this.date = val;
                }
            })
            this.proId = window.location.href.split("=")[1];
            let data = {
                id: this.proId
            }
            axios.post(
                "/product/queryWithId",
                data
            ).then(
                res => {
                    if(res.data.code===200){
                        let pro = res.data.returnData;
                        this.carType = pro.carType;
                        this.mapNum = pro.mapNum;
                        this.name = pro.name;
                        this.price = pro.price;
                        this.factory = pro.factory;
                        this.mark = pro.mark;
                        this.stock = pro.stock;
                        this.typeName = pro.typeName;

                    }else if(res.data.code===500){
                        layer.msg(res.data.message);
                    }
                }

            ).catch(response => {
                layer.alert("服务器忙，请稍后再试")
                console.log(response)
            })

        },

        methods: {
            updatePro:function() {
                let pro = {
                    "id":this.proId,
                    "stock":this.stock,
                    "time":this.date
                }
                axios.post(
                    "/product/oprStock",
                    pro
                ).then(
                    res => {
                        if(res.data.code===200){
                            layer.alert("操作成功", {
                                skin: 'layui-layer-molv',
                                closeBtn: 0,
                                anim: 1,
                                btn: ['好的'],
                                icon: 6,
                                yes :function () {
                                    parent.window.location.href = "index.html";
                                    parent.layer.closeAll();
                                }
                            })
                        }else if(res.data.code===500){
                            layer.msg(res.data.message);
                        }
                    }

                ).catch(response => {
                    layer.alert("服务器忙，请稍后再试")
                    console.log(response)
                })

            },
            addStock: function () {
                this.stock = this.stock + 1;
            },
            subStock: function () {
                if (this.stock >= 1) {
                    this.stock = this.stock - 1;
                }
            }
        }

    })
</script>
</html>